<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>create.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" href="../../../../../../css/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/main.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../../../../../../css/github.css" type="text/css" media="screen" />
<script src="../../../../../../js/jquery-1.3.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/jquery-effect.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/main.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../../../../js/highlight.pack.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>
    <div class="banner">
        
        <h1>
            create.js
        </h1>
        <ul class="files">
            
            <li>
                lib/assets/javascripts/ruiqu_app/todos/create.js
                
            </li>
            <li>Last modified: 2017-01-07 11:54:36 +0800</li>
        </ul>
    </div>

    <div id="bodyContent">
        <div id="content">
  
    <div class="description">
      
<p>jQuery(function($){</p>

<pre><code>// create todo
$(&quot;div#todo-app input#new-todo&quot;).keydown(function() {
       if (event.keyCode == &quot;13&quot;) {//keyCode=13是回车键
               var todoCreateTemp = JST[&#39;ruiqu/todos/create&#39;]
               var csrf = $(&quot;input#js-todo-index-csrf&quot;).val();
               var content = $(this).val();
     var _this = this
               $.ajax({
                       url: &quot;/api/todos&quot;,
                       method: &quot;post&quot;,
                       headers: {
         &#39;X-CSRF-Token&#39;: csrf
       },
                       data: {content: content},
                       success: function(data){
                              //  $(&quot;ul#todo-list&quot;).prepend(todoCreateTemp(data))
         $(&quot;button.js-todo-unfinish-list&quot;).click();
         $(_this).val(&quot;&quot;);
                       }
               })
       }
});

// click todo checkbox
$(document).on(&quot;click&quot;, &quot;input.js-todo-checkbox&quot;, function(){
      var id = $(this).data(&quot;id&quot;);
      $(&quot;li#js-todo-li-&quot;+ id).toggleClass(&quot;todo-done&quot;);
      getTodoCheckedLength();
})

// hover event
$(document).on({
    mouseenter: function(){
        $(this).addClass(&quot;todo-hover&quot;)
    },
    mouseleave: function(){
        $(this).removeClass(&quot;todo-hover&quot;)
    }
}, &#39;li.js-todo-item&#39;);

// done todo event
$(document).on(&quot;click&quot;, &quot;i.js-todo-trash-icon&quot;, function(){
      var id = $(this).data(&quot;id&quot;);
      var csrf = $(&quot;input#js-todo-index-csrf&quot;).val();
      $.ajax({
              url: &quot;/api/todos/&quot;+ id + &quot;/toggle&quot;,
              method: &quot;put&quot;,
              headers: {
                      &#39;X-CSRF-Token&#39;: csrf
              },
              success: function(data){
                      if(data.status == true){
                              $(&quot;li#js-todo-li-&quot;+id).remove();
        getTodoCheckedLength();
                      }
              }
      })
})

//delete todo event
$(document).on(&quot;click&quot;, &quot;i.js-todo-trash&quot;, function(){
      var id = $(this).data(&quot;id&quot;);
      var csrf = $(&quot;input#js-todo-index-csrf&quot;).val();
      $.ajax({
              url: &quot;/api/todos/&quot;+ id,
              method: &quot;delete&quot;,
              headers: {
                      &#39;X-CSRF-Token&#39;: csrf
              },
              success: function(data){
                      if(data.status == true){
                              $(&quot;li#js-todo-li-&quot;+id).remove();
        getTodoCheckedLength();
                      }
              }
      })
})

//　change todo to editing
$(document).on(&quot;click&quot;, &quot;span.js-todo-content&quot;, function(){
              var id = $(this).data(&quot;id&quot;);
              $(&quot;li#js-todo-li-&quot;+id).addClass(&quot;editing&quot;);
              $(&quot;input.js-edit-todo-input&quot;).focus()
      })

// lose focus(blur) to update change
      $(document).on(&quot;blur&quot;, &quot;input.js-edit-todo-input&quot;, function(){
              var csrf = $(&quot;input#js-todo-index-csrf&quot;).val();
              var content = $(this).val();
              var id = $(this).data(&quot;id&quot;);
              $.ajax({
                      url: &quot;/api/todos/&quot;+ id,
                      method: &quot;put&quot;,
                      headers: {
                              &#39;X-CSRF-Token&#39;: csrf
                      },
                      data: {content: content},
                      success: function(data){
                              if(data.status == true){
                                      $(&quot;li#js-todo-li-&quot;+id).removeClass(&quot;editing&quot;);
                                      $(&quot;div.js-todo-view-&quot;+ id +&quot; span&quot;).text(content);
                              }
                      }
              })
      });</code></pre>

<p>})//end jquery</p>

<p>function getTodoCheckedLength(){</p>

<pre><code>var checkedLength = $(&quot;div#todo-app input.js-todo-checkbox:checked&quot;).length
if(checkedLength &gt; 0){
  $(&quot;span.js-todo-done-number&quot;).text(checkedLength)
  $(&quot;a.js-clear-todo&quot;).show();
}else {
  $(&quot;a.js-clear-todo&quot;).hide();
}</code></pre>

<p>}</p>

    </div>
  


  


  
  


  


  

  



  

    

    

    


    


    <!-- Methods -->
              </div>

    </div>
  </body>
</html>
